<template>
  <div class="chat">
    <div class="chat-history">
      <div
        v-for="m in messages"
        :key="m.id"
        class="chat-history-message"
        :class="{'is-local':m.participant.isLocal}"
      >
        <div class="chat-history-username">{{m.participant.name}}</div>
        <div class="chat-history-text">{{m.text}}</div>
      </div>
    </div>
    <div class="chat-input">
      <div class="chat-input-textarea">
        <textarea style="height:100%;width:100%;resize:none;" v-model="localMassageText"></textarea>
      </div>
      <div class="chat-input-controls">
        <div
          class="send-button"
          :class="{'is-loading':sendMesaageButtonLoading}"
          @click="onSendMesaageButtonClicked"
        >
          <span v-show="!sendMesaageButtonLoading">发送</span>

          <span v-show="sendMesaageButtonLoading">发送中</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    conference: Object
  },
  data() {
    return {
      localMassageText: "",
      sendMesaageButtonLoading: false
    };
  },
  components: {},

  created() {},
  methods: {
    //mesaage send
    async onSendMesaageButtonClicked() {
      if (!this.localMassageText || this.sendMesaageButtonLoading) return;
      this.sendMesaageButtonLoading = true;
      try {
        await this.conference.sendTextMessage(this.localMassageText);
        this._clearLocalMassageText();
      } finally {
        this.sendMesaageButtonLoading = false;
      }
    },
    _clearLocalMassageText() {
      this.localMassageText = "";
    }
  },
  mounted() {},
  watch: {},
  computed: {
    messages() {
      return this.conference.getMessages();
    }
  }
};
</script>
<style lang="scss" scoped>
.chat {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.chat-history {
  overflow-y: scroll;
  height: 80%;
  background: dimgray;
  .chat-history-message {
    margin-top: 5px;
    overflow: auto;
  }
  .chat-history-message.is-local div {
    float: right;
  }
  .chat-history-username {
    padding: 5px;
    background: darkkhaki;
    color: white;
    max-width: 25%;
    width: fit-content;
    float: left;
  }

  .chat-history-text {
    padding: 5px 10px;
    color: white;
    background: darkseagreen;
    width: fit-content;
    max-width: 70%;
    overflow: auto;
    overflow-wrap: break-word;
    float: left;
  }
}

.chat-input {
  height: 20%;
  .chat-input-textarea {
    height: calc(100% - 52px);
  }
  .chat-input-controls {
    overflow: auto;
    padding: 10px;
    .send-button {
      cursor: pointer;
      color: white;
      float: right;
      display: flex;
      justify-content: center;
      align-items: center;
      background: cornflowerblue;
      height: 30px;
      width: 100px;
    }
    .send-button.is-loading {
      background: lightblue;
      color: gray;
    }
  }
}
</style>
